import React, { Component } from 'react'

export default class App extends Component {
  state = {
    psw: '',
    info: '',
    isAgree: false,
    flag: false,
    city: 'sz',
    hobby: [],
    sex: '',
  }

  handle = (name) => (e) => {
    // value就是操作的表单元素的值
    const value =
      e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()

    this.setState({
      [name]: value,
    })
  }
  // handle = (name) => {
  //   // 里面返回的这个函数才是事件处理函数
  //   return (e) => {
  //     // value就是操作的表单元素的值
  //     const value =
  //       e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()

  //     this.setState({
  //       [name]: value,
  //     })
  //   }
  // }

  // a = (b) => (c) => (d) => {}

  // a = b => {
  //   return c => {
  //     return d => {

  //     }
  //   }
  // }

  hobbyHandle = (e) => {
    // 将我们选中的value值,添加到hobby数组中,或从hobby数组中移除掉
    // 如何判断到底是要添加value值,还是移除value值? 触发这个函数的时候,如果数组中有当前的value值,说明之前是选中的,现在要取消了,也就意味着现在要从数组中移除了,如果没有,那就要添加进去
    const value = e.target.value
    // 返回要找的元素的下标,有则是下标,没有则是-1
    const index = this.state.hobby.indexOf(value)
    // console.log(index)
    const newhobby = [...this.state.hobby]
    if (index === -1) newhobby.push(value)
    else newhobby.splice(index, 1)
    this.setState({
      hobby: newhobby,
    })
  }

  render() {
    const { psw, info, isAgree, flag, city } = this.state
    return (
      <div>
        <h1>可以受控</h1>
        密码框:
        <input
          type="password"
          name="psw"
          value={psw}
          onChange={this.handle('psw')}
        />
        <br />
        文本域:
        <textarea
          name="info"
          id=""
          cols="30"
          rows="10"
          value={info}
          onChange={this.handle('info')}
        ></textarea>
        <br />
        一个复选框:
        <input
          name="isAgree"
          type="checkbox"
          checked={isAgree}
          onChange={this.handle('isAgree')}
        />
        <br />
        下拉框:
        <select name="city" id="" value={city} onChange={this.handle('city')}>
          <option value="bj">北京</option>
          <option value="sz">深圳</option>
        </select>
        <br />
        <h1>不能受控的</h1>
        多个复选框: <br />
        抽烟:
        <input type="checkbox" value="smoking" onChange={this.hobbyHandle} />
        喝酒:
        <input type="checkbox" value="drinking" onChange={this.hobbyHandle} />
        找富婆:
        <input type="checkbox" value="findMoney" onChange={this.hobbyHandle} />
        <br />
        多个单选框: <br />
        男:
        <input
          type="radio"
          name="sex"
          value="male"
          onChange={this.handle('sex')}
        />
        女:
        <input
          type="radio"
          name="sex"
          value="female"
          onChange={this.handle('sex')}
        />
      </div>
    )
  }
}
